<template>
  <div>
    <h5 class="text-center mb-3">快捷贷业务审批表</h5>

    <table class="table table-bordered vertical-align-middle text-center approve-table">
      <colgroup>
        <col width="5%" />
        <col width="7%" />
        <col width="9%" />
        <col width="7%" />
        <col width="7%" />
        <col width="7%" />
        <col width="7%" />
        <col width="7%" />
        <col width="7%" />
        <col width="7%" />
        <col width="7%" />
        <col width="7%" />
      </colgroup>
      <thead>
        <tr>
          <td>序号</td>
          <td>借款人</td>
          <td>身份证号/营业执照编号</td>
          <td>是否有自有房产</td>
          <td>种植年限</td>
          <td>种植面积</td>
          <td>征信是否满足方案准入</td>
          <td>授信金额</td>
          <td>本次支用金额</td>
          <td>支用期限</td>
          <td>已支用金额</td>
          <td>缴纳担保费</td>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(item, index) in tableData" :key="index">
          <td>{{ index + 1 }}</td>
          <td>{{ item.customer_name || item.corp_name || '-' }}</td>
          <td>{{ item.register_no || item.lender_idcard || '-' }}</td>
          <td>{{ enumIsOrNot[item.is_own_house_cert] || '' }}</td>
          <td>{{ item.plant_year || '-' }}年</td>
          <td>{{ item.plant_area || '-' }}亩</td>
          <td>{{ enumIsOrNot[item.is_credit_access] || '' }}</td>
          <td>{{ item.apply_funds || '-' }}万元</td>
          <td>{{ item.cur_use_funds || '-' }}万元</td>
          <td>{{ item.months || '-' }}月</td>
          <td>{{ item.left_funds || '-' }}万元</td>
          <td>{{ item.gua_fee || '-' }}元</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
export default {
  components: {},
  props: {
    related: {
      type: Object,
      default: () => ({}),
    },
  },
  data() {
    return {
      enumIsOrNot: {
        0: '否',
        1: '是',
      },
      tableData: [],
    }
  },
  computed: {},
  watch: {
    related: {
      handler: function (val) {
        const id = val.customer_related_quick_batch_id
        if (id) {
          this.getData(id)
        }
      },
      immediate: true,
      deep: true,
    },
  },
  created() {},
  mounted() {},
  methods: {
    getData(id) {
      this.$api
        .getData({
          table: 'customer_related_quick',
          params: {
            'customer_related_quick_batch_id.eq': id,
          },
        })
        .then(res => {
          this.tableData = res.data || []
        })
    },
  },
}
</script>

<style lang="scss" scoped>
@import './index.scss';
</style>
